tags: Vuejs

如何開始使用 Vue ✐

Vue 一共提供三種不同的方式可供我們使用，依照使用情境的不同可以選擇不同的方式。

1. 使用 <script src="..."> 引入 ✐

使用此方法可以使用 Vue 官網 所提供的安裝包下載後使用，或者自 unpkg、cdnjs 上獲取資源。

unpkg 資源：

unpkg 是一個內容源自 npm 的全球快速 CDN，能通過 URL 以快速而簡單的方式提供任意包、任意文件。

<script src="https://unpkg.com/vue@2.6.12/dist/vue.js"></script>

cdnjs 資源：

cdnjs 是一項免費的開源 CDN 服務，由 Cloudflare 支持。

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.12/vue.js"></script>

接著便可以開始使用 Vue 了 ～ 在 production version 中建議標注版本號 x.x.xx，以免發生非預期錯誤。

下圖為引入時要注意的版本及檔案細節：

• 紅色 部分表示引用版本，若不標註，版本一律為最新發布版本。
• 綠色 的部分指的是引入的 Vue 檔案是否有壓縮（.esm 代表 module），在初學、開發時請注意 vue.min.js 的壓縮版本刪除了警告，建議使用 vue.js 版本，相信筆者，警告是美好的 XD。

2. 使用 npm、yarn 安裝使用 ✐

使用 npm、yarn 安裝，適合構建中型專案，依據使用習慣採用 npm、yarn 安裝皆可，請在 terminal 中輸入以下內容使用：

使用 npm

npm install vue

使用 yarn

yarn add vue

3. 使用 Vue CLI（Command-Line Interface）✐

什麼是 CLI？

在介紹這個方法前，先簡單提及 CLI 全名為 Command-Line Interface 中文為 命令行介面，是一個以純文字為指令的介面，平常使用的終端機（terminal）便是讓我們使用 CLI 的介面；與之相反的是圖形化介面或稱圖形使用者介面（GUI, Graphical User Interface），代表採用圖形方式顯示的介面，例如桌面便是一種常見的 GUI。

經貼心小夥伴指正並討論，得出 terminal 與 CLI 並不相同，有興趣可以閱讀該篇文章深入理解 命令行界面 (CLI)、终端 (Terminal)、Shell、TTY，这些都是啥意思？

Vue CLI

看完了 CLI，那麼 Vue CLI 又是什麼呢？ Vue CLI 是一個 全局 安裝的 npm 包，提供終端機（terminal）有關 vue 的指令，幫助開發人員快速搭建專案，終端機要先知道 vue xxx 的意思，用戶輸入時才能幫你正確的執行任務，例如：輸入 vue create [xxx專案名稱]，終端機便知道你要建立新的 Vue 專案了，於是開始工作，最終便生成開發者所需的新項目。

以官網的一句話總結， Vue CLI 是一個基於 Vue.js 進行快速開發的完整系統。

使用 Vue CLI，需要先進行 Vue CLI 的全局 global 安裝，請先在終端機中輸入以下指令：

使用 npm

npm install -g @vue/cli

使用 yarn

yarn global add @vue/cli

接著，便可以接著在終端機（terminal）中使用以下指令快速生成一個專案！✸

vue create [你心水的專案名字]

安裝 Vue Devtool 幫助錯誤調試 ✐

Vue 有一套官方的錯誤調試工具 Vue Devtool，允許我們在更友好的介面中調適錯誤，在此可依照需求分別安裝 Chrome、Firefox 的版本，在學習前請記得安裝，會有效的提升開發速率。該版本也有提供黑暗模式，眼睛和我一樣有些畏光的捧油可以使用黑暗模式保護目啾。✦

結語 ✐

以上為本章內容，介紹了三種開始使用 Vue 的姿勢，建議初學時可以自 <script src="..."></script> 開始使用，官網不建議直接使用 Vue CLI 學習，該工具假定用户對 Node.js 和 webpack 有一定程度的了解，使用上要記得這件事。

話說筆者好像把前幾章節拆得太細，內容有些鬆散，後續的章節會試著調整（笑），我們明天見～。

若是文中有任何錯誤、錯字、想討論的內容，歡迎各位大大不吝鞭笞指正、交流分享，筆者不慎感激 ✦ ✦ ✦

▶︎ 筆者 github：https://github.com/YUN-RU-TSENG
▶︎ 老王賣瓜之筆者另一篇鐵人：每天來點 CSS Specification

▶︎ 倘若不斷向深處扎根，似乎就能茁壯成長 - RM

資料來源

1. Vuejs.org
2. Vue CLI
3. MDN Getting started with Vue
4. WIKI CLI
5. unpkg 是什麼
6. cdnjs